<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
            </el-header>
            <el-container>
                <!-- 侧边栏开始 -->
                <!-- <el-aside width="200px">
                    <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" />
                </el-aside> -->
                <!-- 侧边栏结束 -->
                <el-main>
                    <!-- 表格开始 -->
                    <div class="addbtn">
                        <!-- <el-input v-model="search" size="small" placeholder="楼盘名称" /> -->
                        <el-button type="primary" @click="appdata">添加</el-button>
                    </div>
                    <el-table :data="arrdata" height="661" style="width: 100%" doLayout>
                        <el-table-column align="center" header-align="center" prop="type" label="类别" width="180" />
                        <el-table-column align="center" header-align="center" prop="name" label="楼盘名称" width="180" />
                        <el-table-column align="center" header-align="center" prop="price" label="价格" width="120" />
                        <el-table-column align="center" header-align="center" prop="city" label="楼盘地址" width="190" />
                        <el-table-column align="center" header-align="center" prop="area" label="详细地址" width="190" />
                        <el-table-column align="center" header-align="center" prop="time" label="开盘时间" width="180" />
                        <el-table-column align="center" header-align="center" prop="size" label="楼盘大小" width="180" />
                        <el-table-column align="center" header-align="center" prop="state" label="发布状态" width="180" />
                        <el-table-column align="center" header-align="center" label="操作">
                            <!-- 操作按钮开始 -->
                            <template #default="scope">
                                <el-button size="small" @click="pj(scope.$index)">编辑</el-button>
                                <el-button size="small" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                        <!-- 操作按钮结束 -->
                    </el-table>
                    <!-- 表格结束 -->
                    <!-- 分页器 -->
                    <el-pagination class="pag" background layout="prev, pager, next" :total="properties"
                        :page-size="pagesize" @next-click="next" @prev-click="prev" @current-change="pageone" />
                    <!-- 分页器结束 -->
                </el-main>
            </el-container>
        </el-container>
        <el-dialog v-model="dialogFormVisible" title="楼盘详细编辑">
            <el-form :model="form">
                <el-form-item label="类别" :label-width="formLabelWidth">
                    <el-input v-model="form.type" autocomplete="off" />
                </el-form-item>
                <el-form-item label="楼盘名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off" />
                </el-form-item>
                <el-form-item label="楼盘地址" :label-width="formLabelWidth">
                    <el-input v-model="form.city" autocomplete="off" />
                </el-form-item>
                <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input v-model="form.area" autocomplete="off" />
                </el-form-item>
                <el-form-item label="开盘时间" :label-width="formLabelWidth">
                    <el-input v-model="form.time" autocomplete="off" />
                </el-form-item>
                <el-form-item label="楼盘大小" :label-width="formLabelWidth">
                    <el-input v-model="form.size" autocomplete="off" />
                </el-form-item>
                <el-form-item label="发布状态" :label-width="formLabelWidth">
                    <el-input v-model="form.state" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="remove">取消</el-button>
                    <el-button type="primary" @click="onok">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加 -->
        <el-dialog v-model="dialogFormVisibledata" title="添加信息">
            <el-form :model="form">
                <el-form-item label="类别" :label-width="formLabelWidth">
                    <el-input v-model="form.type" autocomplete="off" />
                </el-form-item>
                <el-form-item label="楼盘名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off" />
                </el-form-item>
                <el-form-item label="楼盘地址" :label-width="formLabelWidth">
                    <el-input v-model="form.city" autocomplete="off" />
                </el-form-item>
                <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input v-model="form.area" autocomplete="off" />
                </el-form-item>
                <el-form-item label="开盘时间" :label-width="formLabelWidth">
                    <el-input v-model="form.time" autocomplete="off" />
                </el-form-item>
                <el-form-item label="楼盘大小" :label-width="formLabelWidth">
                    <el-input v-model="form.size" autocomplete="off" />
                </el-form-item>
                <el-form-item label="发布状态" :label-width="formLabelWidth">
                    <el-input v-model="form.state" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisibledata = false">取消</el-button>
                    <el-button type="primary" @click="onappdata">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 删除信息提示 -->
        <el-dialog v-model="centerDialogVisible" title="删除提示" width="30%" align-center>
            <span>是否确认删除</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">否</el-button>
                    <el-button type="primary" @click="removebtn">
                        是
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 删除信息提示结束 -->
    </div>
</template>
<script>
</script>
<script lang="ts" setup>
import {
    onMounted, ref, reactive, computed,
} from 'vue';
import Menu from '@/menu/admin';
import axios from 'axios';
import { editLoupan, removedataone, addLoupan } from '@/api/http/loupan';

const data = Menu;
const defaultProps = {
    label: 'name',
    children: 'children',
};
const removedata = ref({});
const centerDialogVisible = ref(false);
const handleNodeClick = (index: number) => {
    console.log(index);
};
const handleEdit = (index: number) => {
    console.log(index);
};
const handleDelete = (index: number) => {
    centerDialogVisible.value = true;
    removedata.value = arrdata.value[index];
};
// 获取数据
const arrdata = ref([]);

const search = ref('');
const properties = ref(0);
const pagesize = ref(15);
const page = ref(1);
// const datas = ref([]);
onMounted(async () => {
    const res = await axios.get('http://localhost:12306/api/loupan/tcitys');
    const ress = await axios.get(`http://localhost:12306/api/loupan/tcitys/${page.value}/${pagesize.value}`);
    const { data: { data } } = res;
    properties.value = data.length;
    const pagedata = ress.data.message.goodsDetail;
    arrdata.value = pagedata;
});
// 下一页
async function next() {
    const ress = await axios.get(`http://localhost:12306/api/loupan/tcitys/${page.value}/${pagesize.value}`);
    const pagedata = ress.data.message.goodsDetail;
    arrdata.value = pagedata;
}

// 上一页
async function prev() {
    const ress = await axios.get(`http://localhost:12306/api/loupan/tcitys/${page.value}/${pagesize.value}`);
    const pagedata = ress.data.message.goodsDetail;
    arrdata.value = pagedata;
}
// 点击页码
async function pageone(i: number) {
    page.value = i;
    const ress = await axios.get(`http://localhost:12306/api/loupan/tcitys/${page.value}/${pagesize.value}`);
    const pagedata = ress.data.message.goodsDetail;
    arrdata.value = pagedata;
}
const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
const form = reactive({
    type: '',
    name: '',
    price: '',
    city: '',
    area: '',
    time: '',
    size: '',
    state: '',
});
// function aaa(i:any) {
//   console.log(i);
// }
// 编辑
const arrdataone = ref({});
function pj(index: number) {
    dialogFormVisible.value = true;
    // eslint-disable-next-line no-underscore-dangle
    form.type = arrdata.value[index].type;
    form.name = arrdata.value[index].name;
    form.price = arrdata.value[index].price;
    form.city = arrdata.value[index].city;
    form.area = arrdata.value[index].area;
    form.time = arrdata.value[index].time;
    form.size = arrdata.value[index].size;
    form.state = arrdata.value[index].state;
    arrdataone.value = arrdata.value[index];
}
// 提交表单
async function onok(index: number) {
    // eslint-disable-next-line no-underscore-dangle
    const res = editLoupan(arrdataone.value._id, form);
    // console.log(res.data.message);
    const dataone = (await res).data;
    form.type = '';
    form.name = '';
    form.price = '';
    form.city = '';
    form.area = '';
    form.time = '';
    form.size = '';
    form.state = '';
    dialogFormVisible.value = false;
}

// 关闭表单
function remove() {
    form.type = '';
    form.name = '';
    form.price = '';
    form.city = '';
    form.area = '';
    form.time = '';
    form.size = '';
    form.state = '';
    dialogFormVisible.value = false;
}

// 删除按钮
async function removebtn() {
    // eslint-disable-next-line no-underscore-dangle
    const res = removedataone(removedata.value._id);
    const dataone = (await res).data;
    centerDialogVisible.value = false;
}
const dialogFormVisibledata = ref(false);
function appdata() {
    dialogFormVisibledata.value = true;
}
// 添加
async function onappdata() {
    const res = addLoupan(form);
    const ress = await res;
    // const { data } = ress;
}
</script>
<style scoped lang="scss">
.el-header {
    background-color: azure;
}

.el-aside {
    height: 100vh;
    background-color: aqua;
    overflow-y: hidden;
}

.el-main {
    background-color: beige;
    padding: 20px 20px 0 20px;
}

.el-table__cell {
    text-align: center !important;
}

.tabels {
    height: 500px;
}

.pag {
    margin-top: 10px;
    display: flex;
    justify-content: center
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.addbtn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;
}

:deep .el-input {
    width: 300px;
}
</style>
